<template>
  <div>
    <a-card
      :bordered="false"
      :hoverable="true"
      :bodyStyle="{padding:'0'}"
    >
      <!-- 操作按钮区域 -->
      <div class="table-operator">

        <div id="info-content" class="button-content">壁纸分类</div>

        <ul class="wallpaper-type-list">
          <template v-for="item in wallpaperTypeList">
            <li class="item animated swing" :class="current === item.value ?'active' : ''"
                @click="selectWallpaperType(item.value)"
            >{{
                item.text
              }}
            </li>
          </template>
        </ul>
      </div>
    </a-card>
    <div id="content" style="  margin-top: 20px;">
      <div
        v-viewer
        ref="viewer"
        class="my-waterfall"
      >
        <template v-for="(item,index) in dataSource">
<!--          <img src="#" v-lazy="getImgView(item.fileName)" :key="item.fileName"/>-->
          <photo-card :img="getImgView(item.fileName)" link=""></photo-card>
        </template>
      </div>
      <div style="margin:auto; text-align: center;">
        <img style="margin-top: 40px" src="../../../assets/images/noData.png" v-if="dataSource.length <= 0"/>
      </div>
    </div>
    <div class="pagination-page">
      <a-pagination
        :pageSizeOptions="pagination.pageSizeOptions"
        show-size-changer
        :showQuickJumper="pagination.showQuickJumper"
        :showSizeChanger="pagination.showSizeChanger"
        :default-current="1"
        :page-size.sync="pagination.pageSize"
        :total="pagination.total"
        @change="onChange"
        :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </div>
  </div>
</template>

<script>
import AntsImageUpload from '@/components/ants/AntsImageUpload'
import { getAction, getFileAccessHttpUrl, deleteAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import photoCard from '@/components/ants/AntsPhotoCard'

export default {
  name: 'MeiTu',
  components: {
    AntsImageUpload,
    photoCard
  },
  data() {
    return {
      url: {
        list: '/wallpaper/listAll',
        getWallpaperType: '/articleView/getWallpaperType'
      },
      disabled: true,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 50,
        pageSizeOptions: ['50', '100', '150'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 数据源 */
      dataSource: [],
      wallpaperTypeList: [],
      current: '1'
    }
  },
  created() {
    this.loadData()
    this.getWallpaperType()
  },
  mounted() {
  },
  methods: {
    show() {
      // 直接显示图片
      const viewer = this.$refs['viewer'].$viewer
      viewer.show()
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.disabled = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.pagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.disabled = false
      })
    },
    getWallpaperType() {
      getAction(this.url.getWallpaperType, {}).then((res) => {
        if (res.success) {
          this.wallpaperTypeList = res.result
        }
      })
    },
    getQueryParams() {
      const param = {}
      // 获取查询条件
      param.pageNo = this.pagination.current
      param.pageSize = this.pagination.pageSize
      param.fileType = this.current
      return filterObj(param)
    },
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.loadData()
    },
    onChange(pageNumber) {
      this.pagination.current = pageNumber
      this.loadData()
    },
    selectWallpaperType(value) {
      this.current = value
      this.loadData()
    }
  }
}


</script>

<style scoped>
.my-waterfall {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}


.wallpaper-type-list {
  margin-top: 45px;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: #f2f6fc;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  cursor: pointer;
  color: #606266;
  font-size: 12px;
  padding: 0 15px;
  text-align: center;
  transition: color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;
  transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
  transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

li {
  list-style: none;
}

.item:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
}

.active {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  color: #fff;
  background: #409eff;
  box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0 30px
}


.button-content {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  line-height: 30px;
  text-align: center;
  position: absolute;
  top: 10px;
  color: #fff;
  font-weight: 500;
  box-shadow: 2px 5px 10px rgb(49 58 70 / 15%);

}

.pagination-page {
  float: right;
  margin-top: 20px;
}

</style>
